Skip to main content

Create Client

Now we'll start in the React UI, let's get all the support code in place.

Steps​

Get MUI​

In our app directory, we need to add a few packages to get the MUI toolkit, which we'll be using for a grid user interface.

npm install @mui/material @emotion/react @emotion/styled @mui/x-data-grid @mui/icons-material

Create App HTML​

We're making a single page app, so here is the single page.

index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>EmbraceSQL Checklist</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/client/main.tsx"></script>
  </body>
</html>

Create a React Main​

Create the application root as shown. This will be loaded by index.html.

./src/client/main.tsx
import { App } from "./app";
import { EmbraceSQLClient, EmbraceSQLProvider } from "./checklist-react";
import { Container, ThemeProvider, createTheme } from "@mui/material";
import ReactDOM from "react-dom/client";

// connect to where we mounted EmbraceSQL in our server
const client = new EmbraceSQLClient({
  url: `${window.location.href}embracesql`,
});

const theme = createTheme({});

// whole application is wrapped in a provider to allow data access in any component
// the main layout is the default theme and a nice center column
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <EmbraceSQLProvider client={client}>
    <ThemeProvider theme={theme}>
      <Container maxWidth="md" sx={{ height: "90vh", display: "flex" }}>
        <App />
      </Container>
    </ThemeProvider>
  </EmbraceSQLProvider>,
);

Create a React App​

A very simple app at the root.

./src/client/app.tsx
import { Public } from "./checklist-react";
import { ChecklistItems } from "./checklistitems";
import { Checklists } from "./checklists";
import { Box, Stack } from "@mui/material";
import React from "react";

/**
 * Our simple application, controls our view transitions.
 */
export function App() {
  // our currently selected Checklist, let's use the row type from the database
  const [selectedChecklist, setSelectedChecklist] =
    React.useState<Public.Tables.Checklist.Row>();
  return (
    <Stack direction={"row"} spacing={1} sx={{ flex: 1 }}>
      <Box sx={{ flex: 1 }}>
        <Checklists
          onChecklistSelected={(checklist) => setSelectedChecklist(checklist)}
        />
      </Box>
      <Box sx={{ flex: 1 }}>
        {selectedChecklist ? (
          <ChecklistItems checklistId={selectedChecklist?.id} />
        ) : null}
      </Box>
    </Stack>
  );
}